/* router V5 基础使用 */

/* 一级路由 */

/* react-router-dom 实现 */
// 样式私有化处理  styled-components+style
import React from "react";
import {NavBarBox, NavBox} from "./NavStyle"
import {Link, useRoutes} from "react-router-dom";
import RouterView from "../../router-v6/index";
import routes from "../../router-v6/routes";

const Nav = function () {
    return <>
        <NavBox>
            <h2 className="title">购物商城</h2>
            <NavBarBox hover={'red'}>
                <Link to="/a">首页</Link>
                <Link to="/b">秒杀</Link>
                <Link to="/c">我的</Link>
            </NavBarBox>
        </NavBox>
        {/*
          所有的路由匹配规则，放在<Routes>中;
          每一条规则的匹配，还是基于<Route>;
            + 路由匹配成功，不再基于component/render控制渲染的组件，而是基于element，语法格式是 <Component/>
            + 不再需要Switch，默认就是一个匹配成功，就不在匹配下面的了
            + 不再需要exact，默认每一项匹配都是精准匹配
          原有 <Redire > 操作，被 <Navigate to="/" /> 代替
        */}
        {useRoutes(routes)}
    </>
}

export default Nav